<template>
  <view class="register-container">
    <!-- 页面标题 -->
    <view class="title">代驾司机注册</view>

    <!-- 驾照类型选择 -->
    <view class="form-item">
      <view class="label">驾照类型</view>
      <picker
        class="picker"
        :range="driverLicenseTypes"
        @change="handleLicenseTypeChange"
        :value="selectedLicenseTypeIndex"
      >
        <view class="picker-display">
          {{ driverLicenseTypes[selectedLicenseTypeIndex] || '请选择驾照类型' }}
        </view>
      </picker>
    </view>

    <!-- 驾照号码输入 -->
    <view class="form-item">
      <view class="label">驾照号码/身份证号</view>
      <input
        class="input"
        type="text"
        v-model="licenseNo"
        placeholder="请输入驾照号码"
      />
    </view>
	
	<!-- 驾龄选择 -->
	<view class="form-item">
	  <view class="label">驾龄</view>
	  <picker :range="drivingExperienceOptions" @change="onDrivingExperienceChange" :value="selectedExperienceIndex">
	    <view class="picker">
	      {{drivingExperienceOptions[selectedExperienceIndex] || '请选择驾龄'}}
	    </view>
	  </picker>
	</view>

    <!-- 驾驶证图片上传 -->
    <view class="form-item">
      <view class="label">驾驶证图片</view>
      <view class="upload-area" @click="chooseLicensePhoto">
        <image
          v-if="licensePhotoUrl"
          :src="licensePhotoUrl"
          mode="aspectFill"
          class="upload-img"
        />
        <view v-else class="upload-placeholder">
          <uni-icons type="image" size="30"></uni-icons>
          <text>点击上传驾驶证图片</text>
        </view>
      </view>
    </view>

    <!-- 行驶证图片上传 -->
    <view class="form-item">
      <view class="label">行驶证图片</view>
      <view class="upload-area" @click="chooseVehicleLicensePhoto">
        <image
          v-if="vehicleLicensePhotoUrl"
          :src="vehicleLicensePhotoUrl"
          mode="aspectFill"
          class="upload-img"
        />
        <view v-else class="upload-placeholder">
          <uni-icons type="image" size="30"></uni-icons>
          <text>点击上传行驶证图片</text>
        </view>
      </view>
    </view>

    <!-- 底部提交按钮 -->
    <view class="submit-btn" @click="submitRegister">
      提交注册
    </view>
  </view>
</template>

<script>
import { getDriverLicenseTypes, submitDriverRegister } from '@/api/driver/driver';
import { uploadFile } from '@/api/file/file.js';

export default {
  data() {
    return {
      driverLicenseTypes: [], // 驾照类型枚举列表
      selectedLicenseTypeIndex: 5, // 选中的驾照类型索引
      licenseNo: '', // 驾照号码
      licensePhotoUrl: '', // 驾驶证图片在线地址
      vehicleLicensePhotoUrl: '', // 行驶证图片在线地址
	  drivingExperienceOptions: ['2年', '3年', '4年', '5年及以上'],
	  selectedExperienceIndex: 0
    };
  },
  mounted() {
    this.getDriverLicenseTypes(); // 页面加载时获取驾照类型枚举
  },
  methods: {
    // 获取驾照类型枚举（从后台接口）
    getDriverLicenseTypes() {
      getDriverLicenseTypes().then((res) => {
        if (res.code === 200) {
          this.driverLicenseTypes = res.data;
        } else {
          uni.showToast({
            title: '获取驾照类型失败',
            icon: 'none',
          });
        }
      }).catch((err) => {
        uni.showToast({
          title: '网络异常，获取驾照类型失败',
          icon: 'none',
        });
        console.error('获取驾照类型接口异常：', err);
      });
    },
	onDrivingExperienceChange(e) {
	  this.selectedExperienceIndex = e.detail.value;
	},

    // 驾照类型选择变化
    handleLicenseTypeChange(e) {
      this.selectedLicenseTypeIndex = e.detail.value;
    },

    // 选择驾驶证图片（支持手机相册/相机）
    chooseLicensePhoto() {
      uni.chooseImage({
        count: 1, // 最多选1张
        sourceType: ['album', 'camera'], // 相册、相机均可选
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          this.uploadImageToServer(tempFilePath, 'license');
        },
        fail: (err) => {
          uni.showToast({
            title: '选择驾驶证图片失败',
            icon: 'none',
          });
          console.error('选择驾驶证图片失败：', err);
        },
      });
    },

    // 选择行驶证图片（支持手机相册/相机）
    chooseVehicleLicensePhoto() {
      uni.chooseImage({
        count: 1,
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          this.uploadImageToServer(tempFilePath, 'vehicle');
        },
        fail: (err) => {
          uni.showToast({
            title: '选择行驶证图片失败',
            icon: 'none',
          });
          console.error('选择行驶证图片失败：', err);
        },
      });
    },

    // 上传图片到服务器
    uploadImageToServer(tempFilePath, type) {
      uni.showLoading({
        title: '图片上传中...',
      });
      uploadFile(tempFilePath).then((res) => {
        uni.hideLoading();
        if (res.code === 200) {
          const imageUrl = res.data.url;
          if (type === 'license') {
            this.licensePhotoUrl = imageUrl;
          } else if (type === 'vehicle') {
            this.vehicleLicensePhotoUrl = imageUrl;
          }
          uni.showToast({
            title: '图片上传成功',
            icon: 'success',
          });
        } else {
          uni.showToast({
            title: '图片上传失败',
            icon: 'none',
          });
        }
      }).catch((err) => {
        uni.hideLoading();
        uni.showToast({
          title: '图片上传异常',
          icon: 'none',
        });
        console.error('图片上传接口异常：', err);
      });
    },

    // 提交注册
    submitRegister() {
      // 表单验证
      if (this.selectedLicenseTypeIndex === -1) {
        uni.showToast({
          title: '请选择驾照类型',
          icon: 'none',
        });
        return;
      }
      if (!this.licenseNo.trim()) {
        uni.showToast({
          title: '请输入驾照号码',
          icon: 'none',
        });
        return;
      }
      if (!this.licensePhotoUrl) {
        uni.showToast({
          title: '请上传驾驶证图片',
          icon: 'none',
        });
        return;
      }
      if (!this.vehicleLicensePhotoUrl) {
        uni.showToast({
          title: '请上传行驶证图片',
          icon: 'none',
        });
        return;
      }

      // 构造提交数据
      const data = {
        licenseType: this.driverLicenseTypes[this.selectedLicenseTypeIndex],
        licenseNo: this.licenseNo,
		drivingExperience: this.drivingExperienceOptions[this.selectedExperienceIndex],
        licensePhotoUrl: this.licensePhotoUrl,
        vehicleLicensePhotoUrl: this.vehicleLicensePhotoUrl,
      };

      uni.showLoading({
        title: '注册提交中...',
      });
      submitDriverRegister(data).then((res) => {
        uni.hideLoading();
        if (res.code === 200) {
          uni.showToast({
            title: '注册成功,等待审批',
            icon: 'success',
          });
          // 注册成功后跳转（示例：跳转到登录页）
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/work/index',
            });
          }, 1500);
        } else {
          uni.showToast({
            title: res.msg || '注册失败',
            icon: 'none',
          });
        }
      }).catch((err) => {
        uni.hideLoading();
        uni.showToast({
          title: '注册接口异常',
          icon: 'none',
        });
      });
    },
  },
};
</script>

<style scoped>
.register-container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
  color: #333;
}

.form-item {
  margin-bottom: 30rpx;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
}

.picker {
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 20rpx;
  background-color: #fff;
}

.picker-display {
  font-size: 28rpx;
  color: #333;
}

.input {
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  background-color: #fff;
  height: 0%;
}

.upload-area {
  border: 1px dashed #ccc;
  border-radius: 8rpx;
  padding: 30rpx;
  text-align: center;
  background-color: #fff;
}

.upload-img {
  width: 100%;
  height: 200rpx;
  border-radius: 8rpx;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #999;
}

.submit-btn {
  background-color: #007aff;
  color: #fff;
  text-align: center;
  padding: 25rpx;
  border-radius: 8rpx;
  font-size: 30rpx;
  margin-top: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
}

.submit-btn:active {
  opacity: 0.8;
}
</style>